import AutoChart from '@/components/Echarts/AutoChart';
// @ts-ignore
import { BorderBox7 } from '@jiaminghi/data-view-react';
import { useEffect } from 'react';
import { useImmer } from 'use-immer';
import '../../Home.less';

const ColumnCharts: React.FC = () => {
  const [options, setOptions] = useImmer({
    tooltip: {
      trigger: 'item',
    },
    legend: {
      show: true,
      top: 'center',
      right: '3%',
      orient: 'vertical', // 导航 是垂直排列  还是水平默认水平('horizontal')
      itemGap: 25, // 导航每个之间的间距
      textStyle: {
        color: '#fff',
      },
      itemWidth: 8,
      itemHeight: 8,
    },
    series: [
      {
        name: '城市',
        type: 'pie',
        radius: ['50%', '68%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderWidth: 5,
          borderColor: 'black',
          color: function (params: any) {
            // 根据参数返回不同的颜色
            switch (params.dataIndex) {
              case 0:
                return '#7aabf5';
              case 1:
                return '#396993';
              case 2:
                return '#c1fafd';
              case 3:
                return '#94d8db';
              case 4:
                return '#5a9597';
              default:
                return '#fff';
            }
          },
        },
        label: {
          show: true,
        },
        Emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: true,
        },
        data: [
          { value: 1048, name: '北京' },
          { value: 735, name: '上海' },
          { value: 580, name: '广州' },
          { value: 484, name: '深圳' },
          { value: 300, name: '其他' },
        ],
        right: 65,
      },
    ],
  });

  useEffect(() => {
    // loginData().then((res) => {
    //   setOptions((draft) => {
    //     draft.xAxis[0].data = res.data.xData;
    //     draft.series[0].data = res.data.expectedData;
    //   });
    // });
  }, []);

  return (
    <>
      <div className='marginb-10'>
        <BorderBox7>
          <div className="echart_title">
            <div>我是标题</div>
          </div>
          <div className="h-min padding-5">
            <AutoChart option={options as any}></AutoChart>
          </div>
        </BorderBox7>
      </div>
    </>
  );
};
export default ColumnCharts;
